<template class="bg-body">
    <div>
        <!-- 当绑定的值获取后  再进行渲染  否则会报undefined的错 -->
        <!-- v-if="heroInfo.ename != undefined"  -->
        <div class="bg-container" v-if="heroInfo.ename != undefined"
            :style="{ background: 'url(https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/' + heroInfo.ename + '/' + heroInfo.ename + '-bigskin-' + currentIndex + '.jpg) center 0' }">
            <div class="header" @mouseenter="enterNavEvent">
                <h1>
                    <a href="#"><img src="../assets/logo-king.png" /></a>
                </h1>
                <!-- 一级导航 -->
                <ul class="nav-list">
                    <li><a>游戏资料<em>DATA</em></a></li>
                    <li><a>内容中心<em>CONTENTS</em></a></li>
                    <li><a>赛事中心<em>MATCH</em></a></li>
                    <li><a>百态王者<em>CULTURE</em></a></li>
                    <li><a>社区互动<em>COMMUNITY</em></a></li>
                    <li><a>玩家支持<em>PLAYER</em></a></li>
                    <li><a>IP新游<em>NEWGAMES</em></a></li>
                </ul>
            </div>
            <!-- 二级导航 -->
            <div class="sub-nav" v-show="seen" @mouseleave="leaveSubNavEvent">
                <ul class="sub-nav-inner">
                    <li class="down-nav">
                        <a href="#">版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#">英雄资料</a>
                        <a href="#"><i class="icon-hot"></i>爆料站</a>
                        <a href="#">世界观体验站</a>
                        <a href="#">游戏壁纸</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">攻略中心</a>
                        <a href="#">英雄攻略</a>
                        <a href="#">视频中心</a>
                        <a href="#">开放素材库</a>
                        <a href="#">内容共创平台</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">KPL</a>
                        <a href="#">挑战者杯</a>
                        <a href="#">全国大赛</a>
                        <a href="#">女子公开赛</a>
                        <a href="#">K甲联赛</a>
                        <a href="#">高校联赛</a>
                        <a href="#">全民赛</a>
                        <a href="#">赛事数据</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">荣耀传承</a>
                        <a href="#">王者文化站</a>
                        <a href="#">万千世界</a>
                        <a href="#">星光殿堂</a>
                        <a href="#">IP共创计划</a>
                        <a href="#">商户特权</a>
                        <a href="#">龙翼王者卡</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">创意互动营</a>
                        <a href="#">王者营地</a>
                        <a href="#">微信圈子</a>
                        <a href="#">官方微博</a>
                        <a href="#">微信公众号</a>
                        <a href="#">手Q订阅号</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">腾讯游戏防沉迷</a>
                        <a href="#">成长守护平台</a>
                        <a href="#">对局环境情报站</a>
                        <a href="#">客服专区</a>
                        <a href="#">礼包兑换</a>
                        <a href="#">自助服务</a>
                    </li>
                    <li class="down-nav">
                        <a href="#">王者荣耀·世界</a>
                        <a href="#">代号:破晓</a>
                        <a href="#">代号:启程</a>
                    </li>
                </ul>
            </div>

            <!-- 皮肤列表导航 -->
            <div class="skin-nav">
                <a href="#" class="skin">皮<br />肤</a>
                <ul class="skin-list">
                    <li v-for="(item, index) in skinData" :key="index" @mouseenter="enter(index + 1)">
                        <i><img
                                :src="'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + heroInfo.ename + '/' + heroInfo.ename + '-smallskin-' + (index + 1) + '.jpg'"></i>
                        <p>{{ item }}</p>
                    </li>
                </ul>
            </div>
        </div>
        <el-container>
            <el-main>
                <div class="info-container">
                    <div class="info-head">
                        <i class="el-icon-s-home"
                            style="width: 30px;height: 30px;font-size: 20px;color: rgb(204, 204, 204);"></i>
                        <a href="#">王者荣耀首页</a>&emsp;>&emsp;
                        <a href="#">英雄介绍</a>&emsp;>&emsp;
                        <label>{{ heroInfo.cname }}</label>
                    </div>
                    <div>
                        <i class="el-icon-reading" style="width: 30px;height: 30px;font-size: 20px;"></i>
                        <h3 style="display:inline-block">技能介绍</h3>
                    </div>
                    <el-card class="box-card">
                        <ul class="skill-ul">
                            <li class="curr" v-for="(item, index) in nums" :key="index"
                                @mouseenter="skillseenEnter(index)">
                                <img v-if="heroInfo.ename != undefined"
                                    :src="'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + heroInfo.ename + '/' + heroInfo.ename + item + '0.png'" />
                                <p style="padding-top:20px" v-show="switchSkill[index]">英雄技能{{ index + 1 }}</p>
                            </li>
                        </ul>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </div>

</template>

<script>
export default {
    data() {
        return {
            heroInfo: "",
            skinData: '',
            currentIndex: 1,
            nums: [0, 1, 2, 3],
            seen: false,
            switchSkill: [true, false, false, false]
        }
    },
    created() {
        this.query();
    },
    methods: {
        query() {
            fetch('http://47.241.102.141:3000/heros')
                .then(response => response.json())
                .then(data => {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].ename == this.$route.params.id) {
                            this.heroInfo = data[i];
                        }
                    }

                    // console.log(this.heroInfo.ename + "****" + this.heroInfo.cname);

                    //获取当前英雄的皮肤 数组
                    this.skinData = this.heroInfo.skin_name.split("|");
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //鼠标移入事件
        enter(index) {
            this.currentIndex = index;
        },
        //鼠标移入显示二级导航
        enterNavEvent() {
            this.seen = true;
        },
        //鼠标离开二级导航 则隐藏二级导航这块div
        leaveSubNavEvent() {
            this.seen = false;
        },
        //鼠标移入一个技能时 显示
        skillseenEnter(index) {
            this.switchSkill = [];
            this.switchSkill.fill(false);
            //this.switchSkill  该数组存放四个技能的状态 当鼠标移入某个技能时 则显示技能描述
            //每次需对该数组清零，且填充为false  只有移入的那个技能为true
            this.switchSkill[index] = true;
        }
    },
}
</script>

<style>
.bg-body {
    width: 100%;
    height: 100%;
}

.bg-container {
    width: 100%;
    height: 880px;
}


.header {
    min-width: 1300px;
    padding-left: 126px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #333;
    height: 84px !important;
    line-height: 84px;
    display: flex;
    cursor: pointer;
}

.header h1 {
    width: 230px;
    height: 84px;
    line-height: 84px;

}

.header h1 img {
    width: 200px;
    height: 54px;
    padding: 14px 0 14px 30px;
}

a {
    text-decoration: none;
    color: #323235;
}

/*一级导航 */
.nav-list {
    width: 890px;
    padding-left: 30px;
}

.nav-list li {
    float: left;
    width: 115px;
    height: 84px;
    text-align: center;
}

.nav-list a {
    display: block;
    width: 110px;
    height: 64px;
    padding: 20px 0 0;
    color: #c9c9dd;
    font-size: 18px;
    line-height: 30px;
}

.nav-list li a:hover {
    color: #e4b653;
    background-color: rgba(229, 179, 72, 0.2);
}

.nav-list a:hover em {
    color: #e4b653;
    border-bottom: 3px solid rgb(243, 194, 88);
}

.nav-list em {
    display: block;
    padding-top: 5px;
    transform: scale(0.95);
    font-size: 12px;
    font-style: normal;
    line-height: 16px;
    color: #858792;
}

/*二级导航 */
.sub-nav {
    transition: all 1s ease;
    /* transition: width 0.6s ease 0.3s, height 0.6s ease-in-out 1s; */
    position: absolute;
    top: 83px;
    left: 0;
    padding-left: 92px;
    width: 100%;
    background: #000;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3;
    overflow: hidden;
    box-sizing: border-box;
}

.sub-nav-inner {
    width: 890px;
    height: 240px;
    margin: 0 auto;
    overflow: hidden;
    zoom: 1;
    padding-top: 15px;
    padding-bottom: 30px;
    padding: 15px 0 30px 50px;
}

.down-nav {
    float: left;
    display: inline;
    width: 110px;
    padding: 2px 2.5px 0;
    text-align: center;
    white-space: nowrap;
    /* background-color: #3589DD; */
}

.down-nav a {
    height: 30px;
    line-height: 30px;
    display: block;
    padding: 0;
    font-size: 14px;
    color: #c9c9dd;
}

.down-nav a:hover {
    color: #e4b653;
    text-decoration: underline;
}

/*皮肤导航 */
.skin-nav {
    position: absolute;
    width: 100%;
    right: 0;
    top: 750px;
}

.skin-nav .skin {
    display: block;
    width: 25px;
    height: 62px;
    float: right;
    border-radius: 5px;
    background: #f3c258;
    line-height: 26px;
    text-align: center;
    font-size: 16px;
    padding-top: 15px;
    color: #000;
}

.skin-list {
    float: right;
    height: 110px;
    overflow: hidden;
}

.skin-list li {
    width: 89px;
    height: 88px;
    float: right;
    display: inline;
    cursor: pointer;
}

.skin-list li i {
    float: left;
    width: 65px;
    height: 67px;
    margin-right: 25px;
    border: solid 4px #7a7a7a;
    border-radius: 0 12px;
    overflow: hidden;
}

.skin-list li p {
    font-size: 14px;
    color: #FFF;
    text-align: center;
    text-shadow: 0 1px 2px #000;
}

.skin-list li i img {
    display: block;
    border: 0;
    border-radius: 2px 2px 2px 2px;
    width: 67px;
    height: 69px;
    margin-left: -1px;
    margin-top: -1px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    height: 100%;
}

body>.el-container {
    margin-bottom: 40px;
    height: 100%;
}

.info-container {
    width: 1200px;
    margin: 0 auto;
}

.info-head {
    padding: 35px 0;
}

.info-head a {
    color: #363636;
    font-size: 16px;
    text-decoration: underline;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 770px;
    position: relative;
    float: left;
    min-height: 280px;
    background: #fff;
    border: solid 1px #e5e5e5;
    margin-bottom: 50px;
}

.skill-ul {
    height: 100px;
    padding: 20px 0 0 20px;
    display: flex;
}

.skill-ul li {
    width: 92px;
    height: 88px;
    float: left;
    display: inline;
    margin-right: 29px;
    cursor: pointer;
    background-position: -100px -70px;
}

.skill-ul li img {
    width: 71px;
    height: 71px;
    background: #000;
    margin: 8px 0 0 11px;
    border-radius: 50%;
}

.skill-ul li.curr {
    background-position: 0 -70px;
}

.icon,
.skill-ul li,
.equip-list li {
    background: url(../assets/item.png) no-repeat;
    display: block;
}
</style>